<template>
  <div class="blog-page" @keydown="handleKeydown" tabindex="0" ref="pageRef">
    <!-- 彩蛋提示 -->
    <EasterEggHint :show="showEasterEgg" />

    <!-- 留言统计 -->
    <div class="stats-section">
      <div class="stats-grid">
        <StatCard icon="💬" :number="totalMessages" label="总留言数" />
        <StatCard icon="👥" :number="uniqueUsers" label="参与用户" />
        <StatCard icon="🔥" :number="todayMessages" label="今日留言" />
      </div>
    </div>

    <!-- 发表留言 -->
    <div class="message-form-section">
      <FormCard title="发表留言">
        <a-form :model="messageForm" @finish="handleSubmitMessage" layout="vertical">
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="昵称" name="nickname" :rules="[{ required: true, message: '请输入昵称' }]">
                <a-input v-model:value="messageForm.nickname" placeholder="请输入您的昵称" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item
                label="邮箱"
                name="email"
                :rules="[
                  { required: true, message: '请输入邮箱' },
                  { type: 'email', message: '请输入正确的邮箱格式' },
                ]"
              >
                <a-input v-model:value="messageForm.email" placeholder="请输入您的邮箱" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-form-item label="留言内容" name="content" :rules="[{ required: true, message: '请输入留言内容' }]">
            <a-textarea v-model:value="messageForm.content" placeholder="请输入您的留言内容..." :rows="4" :maxlength="500" show-count />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" :loading="submitting" size="large">
              <template #icon>
                <SendOutlined />
              </template>
              发表留言
            </a-button>
          </a-form-item>
        </a-form>
      </FormCard>
    </div>

    <!-- 留言列表 -->
    <div class="messages-section">
      <SectionTitle title="留言列表" />

      <a-spin :spinning="loading">
        <div class="messages-list">
          <EmptyState
            v-if="!loading && messages.length === 0"
            icon="💬"
            title="暂无留言"
            subtitle="快来发表第一条留言吧！"
            description="暂无留言"
            class="custom-empty-dark"
          />

          <div v-else class="message-items">
            <div v-for="message in paginatedMessages" :key="message.id" class="message-item">
              <div class="message-header">
                <div class="user-info">
                  <a-avatar :size="40" :style="{ backgroundColor: message.avatarColor }">
                    {{ message.nickname.charAt(0).toUpperCase() }}
                  </a-avatar>
                  <div class="user-details">
                    <div class="nickname">{{ message.nickname }}</div>
                    <div class="message-time">{{ formatTime(message.createTime) }}</div>
                  </div>
                </div>
                <div class="message-actions">
                  <a-button
                    type="text"
                    size="small"
                    @click="handleLike(message)"
                    :class="{ liked: message.isLiked }"
                    style="font-size: 1.25em; font-weight: 700"
                  >
                    ❤️ {{ message.likes }}
                  </a-button>
                  <a-button type="text" size="small" @click="showReplyForm(message)">
                    <template #icon>
                      <MessageOutlined />
                    </template>
                    回复
                  </a-button>
                </div>
              </div>
              <div class="message-content">
                {{ message.content }}
              </div>

              <!-- 回复列表 -->
              <div v-if="message.replies && message.replies.length > 0" class="replies-section">
                <div class="replies-header">
                  <span class="replies-count">{{ message.replies.length }} 条回复</span>
                </div>
                <div class="reply-items">
                  <!-- 显示前2条回复 -->
                  <div v-for="reply in message.replies.slice(0, 2)" :key="reply.id" class="reply-item">
                    <div class="reply-user">
                      <a-avatar :size="24" :style="{ backgroundColor: reply.avatarColor }">
                        {{ reply.nickname.charAt(0).toUpperCase() }}
                      </a-avatar>
                      <span :class="['reply-nickname', reply.nickname === message.nickname ? 'louzhu' : '']">{{ reply.nickname }}</span>
                      <span class="reply-time">{{ formatTime(reply.createTime) }}</span>
                    </div>
                    <div class="reply-content">{{ reply.content }}</div>
                  </div>

                  <!-- 展开更多回复 -->
                  <div v-if="message.replies.length > 2 && !message.showAllReplies" class="expand-replies">
                    <a-button type="link" size="small" @click="toggleReplies(message)">
                      <template #icon>
                        <DownOutlined />
                      </template>
                      展开 {{ message.replies.length - 2 }} 条回复
                    </a-button>
                  </div>

                  <!-- 展开后的回复 -->
                  <div v-if="message.showAllReplies" class="expanded-replies">
                    <div v-for="reply in message.replies.slice(2)" :key="reply.id" class="reply-item">
                      <div class="reply-user">
                        <a-avatar :size="24" :style="{ backgroundColor: reply.avatarColor }">
                          {{ reply.nickname.charAt(0).toUpperCase() }}
                        </a-avatar>
                        <span :class="['reply-nickname', reply.nickname === message.nickname ? 'louzhu' : '']">{{ reply.nickname }}</span>
                        <span class="reply-time">{{ formatTime(reply.createTime) }}</span>
                      </div>
                      <div class="reply-content">{{ reply.content }}</div>
                    </div>
                    <div class="collapse-replies">
                      <a-button type="link" size="small" @click="toggleReplies(message)">
                        <template #icon>
                          <UpOutlined />
                        </template>
                        收起回复
                      </a-button>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 回复表单 -->
              <div v-if="message.showReplyForm" class="reply-form">
                <span v-if="message.nickname" class="reply-to"> @{{ message.nickname }}</span>
                <a-form :model="replyForm" @finish="handleSubmitReply(message)" layout="vertical">
                  <a-form-item name="content" :rules="[{ required: true, message: '请输入回复内容' }]">
                    <a-textarea
                      v-model:value="replyForm.content"
                      placeholder="请输入回复内容..."
                      :rows="4"
                      :maxlength="500"
                      show-count
                      class="rich-textarea"
                    />
                  </a-form-item>
                  <a-form-item>
                    <a-button type="primary" html-type="submit" size="middle">回复</a-button>
                    <a-button size="middle" @click="cancelReply(message)" style="margin-left: 8px">取消</a-button>
                  </a-form-item>
                </a-form>
              </div>
            </div>
          </div>
        </div>
      </a-spin>

      <!-- 分页 -->
      <BlogPagination
        v-model:current="currentPage"
        :total="totalMessages"
        :page-size="pageSize"
        :show-total="(total, range) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条留言`"
        @change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, onMounted, nextTick } from 'vue';
  import { useRouter } from 'vue-router';
  import { message } from 'ant-design-vue';
  import { getPublicMessages, submitMessage, submitReply, likeMessage, getMessageStats } from '/@/api/blog/messages';
  import EasterEggHint from '../components/EasterEggHint.vue';
  import StatCard from '../components/StatCard.vue';
  import FormCard from '../components/FormCard.vue';
  import SectionTitle from '../components/SectionTitle.vue';
  import EmptyState from '../components/EmptyState.vue';
  import BlogPagination from '../components/BlogPagination.vue';

  defineOptions({
    name: 'BlogMessagePage',
  });

  const router = useRouter();
  const pageRef = ref<HTMLElement>();
  const showEasterEgg = ref(false);
  const submitting = ref(false);
  const loading = ref(false);
  const currentPage = ref(1);
  const pageSize = ref(6);

  // 留言表单
  const messageForm = ref({
    nickname: '',
    email: '',
    content: '',
  });

  // 回复表单
  const replyForm = ref({
    content: '',
  });

  // 留言数据
  const messages = ref<any[]>([]);
  const totalMessages = ref(0);
  const messageStats = ref({
    totalMessages: 0,
    uniqueUsers: 0,
    todayMessages: 0,
  });

  // 获取留言统计
  const fetchMessageStats = async () => {
    try {
      const res = await getMessageStats();
      // 直接使用返回的数据，不检查success属性
      messageStats.value = res;
    } catch (error) {
      console.error('获取留言统计失败:', error);
    }
  };

  // 获取留言列表
  const fetchMessages = async () => {
    loading.value = true;
    try {
      const params = {
        pageNo: currentPage.value,
        pageSize: pageSize.value,
      };

      const res = await getPublicMessages(params);

      // 直接使用返回的数据，不检查success属性
      messages.value = res.records || [];
      totalMessages.value = res.total || 0;
    } catch (error) {
      console.error('获取留言失败:', error);
      message.error('获取留言列表失败');
    } finally {
      loading.value = false;
    }
  };

  // 计算属性
  const paginatedMessages = computed(() => {
    return messages.value;
  });

  const uniqueUsers = computed(() => messageStats.value.uniqueUsers);
  const todayMessages = computed(() => messageStats.value.todayMessages);

  // 方法
  const handleKeydown = (event: KeyboardEvent) => {
    if (event.key === 'ArrowLeft') {
      event.preventDefault(); // 阻止默认行为
      event.stopPropagation(); // 阻止事件冒泡
      router.go(-1);
    }
  };

  const handleSubmitMessage = async () => {
    submitting.value = true;
    try {
      await submitMessage(messageForm.value);

      // 直接处理返回结果，不检查success属性
      message.success('留言提交成功！');
      // 重置表单
      messageForm.value = {
        nickname: '',
        email: '',
        content: '',
      };
      // 刷新数据
      fetchMessages();
      fetchMessageStats();
    } catch (error) {
      console.error('提交留言失败:', error);
      message.error('留言提交失败，请重试');
    } finally {
      submitting.value = false;
    }
  };

  const handleSubmitReply = async (messageItem: any) => {
    try {
      const data = {
        parentId: messageItem.id,
        nickname: messageForm.value.nickname || '匿名用户',
        email: messageForm.value.email || '',
        content: replyForm.value.content,
      };

      await submitReply(data);

      // 直接处理返回结果，不检查success属性
      message.success('回复提交成功！');
      // 重置回复表单
      replyForm.value.content = '';
      messageItem.showReplyForm = false;
      // 刷新数据
      fetchMessages();
    } catch (error) {
      console.error('提交回复失败:', error);
      message.error('回复提交失败，请重试');
    }
  };

  const handleLike = async (messageItem: any) => {
    try {
      await likeMessage(messageItem.id);

      // 直接处理返回结果，不检查success属性
      messageItem.isLiked = !messageItem.isLiked;
      messageItem.likes += messageItem.isLiked ? 1 : -1;
      message.success(messageItem.isLiked ? '点赞成功！' : '取消点赞');
    } catch (error) {
      console.error('点赞失败:', error);
      message.error('操作失败，请重试');
    }
  };

  const showReplyForm = (messageItem: any) => {
    // 重置其他留言的回复表单
    messages.value.forEach((msg: any) => {
      msg.showReplyForm = false;
    });
    messageItem.showReplyForm = true;
  };

  const cancelReply = (messageItem: any) => {
    messageItem.showReplyForm = false;
    replyForm.value.content = '';
  };

  const toggleReplies = (messageItem: any) => {
    messageItem.showAllReplies = !messageItem.showAllReplies;
  };

  const handlePageChange = (page: number) => {
    currentPage.value = page;
    fetchMessages();
    // 滚动到页面顶部
    if (pageRef.value) {
      pageRef.value.scrollIntoView({ behavior: 'smooth' });
    }
  };

  const formatTime = (timeStr: string) => {
    const date = new Date(timeStr);
    const now = new Date();
    const diff = now.getTime() - date.getTime();
    const minutes = Math.floor(diff / 60000);
    const hours = Math.floor(diff / 3600000);
    const days = Math.floor(diff / 86400000);

    if (minutes < 1) return '刚刚';
    if (minutes < 60) return `${minutes}分钟前`;
    if (hours < 24) return `${hours}小时前`;
    if (days < 7) return `${days}天前`;
    return date.toLocaleDateString();
  };

  // 初始化
  onMounted(() => {
    fetchMessages();
    fetchMessageStats();

    // 设置页面焦点，确保键盘事件能够正确触发
    nextTick(() => {
      if (pageRef.value) {
        pageRef.value.focus();
      }
    });
  });
</script>

<style scoped lang="scss">
  @use '../css/blog.scss' as *;

  /* 留言表单区域 */
  .message-form-section {
    margin-bottom: 4.5rem;
  }

  /* 留言列表区域 */
  .messages-section {
    margin-bottom: 4.5rem;
  }

  .message-items {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .message-item {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(24px);
    border-radius: 20px;
    padding: 2.5rem 2.8rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
  }

  .message-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  }

  .message-item:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 0 14px 56px 0 rgba(0, 0, 0, 0.22);
    transform: translateY(-3px) scale(1.01);
  }

  .message-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.8rem;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 1.4rem;
  }

  .user-details {
    display: flex;
    flex-direction: column;
  }

  .nickname {
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  .message-time {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
    font-weight: 500;
    margin-top: 0.3rem;
    letter-spacing: 0.3px;
  }

  .message-actions {
    display: flex;
    gap: 1rem;
  }

  .message-actions :deep(.ant-btn) {
    color: rgba(255, 255, 255, 0.65) !important;
    border: none !important;
    background: rgba(255, 255, 255, 0.05) !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.6rem 1rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .message-actions :deep(.ant-btn:hover) {
    color: #1890ff !important;
    background: rgba(24, 144, 255, 0.12) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2) !important;
  }

  /* 喜欢按钮特殊样式 */
  .message-actions :deep(.ant-btn.liked) {
    color: #fff !important;
    background: linear-gradient(135deg, #ff4d4f 0%, #cf1322 100%) !important;
    animation: liked-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(255, 77, 79, 0.4) !important;
    border: 1px solid rgba(255, 77, 79, 0.3) !important;
    position: relative;
    overflow: hidden;
  }

  .message-actions :deep(.ant-btn.liked::before) {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.8s;
  }

  .message-actions :deep(.ant-btn.liked:hover::before) {
    left: 100%;
  }

  .message-actions :deep(.ant-btn.liked:hover) {
    background: linear-gradient(135deg, #ff7875 0%, #d9363e 100%) !important;
    box-shadow: 0 8px 25px rgba(255, 77, 79, 0.5) !important;
    transform: translateY(-3px) scale(1.05);
    border-color: rgba(255, 77, 79, 0.5) !important;
  }

  /* 未点赞状态的喜欢按钮 */
  .message-actions :deep(.ant-btn:not(.liked)) {
    position: relative;
    overflow: hidden;
  }

  .message-actions :deep(.ant-btn:not(.liked)::before) {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 77, 79, 0.1), transparent);
    transition: left 0.6s;
  }

  .message-actions :deep(.ant-btn:not(.liked):hover::before) {
    left: 100%;
  }

  .message-actions :deep(.ant-btn:not(.liked):hover) {
    color: #ff4d4f !important;
    background: rgba(255, 77, 79, 0.08) !important;
    border: 1px solid rgba(255, 77, 79, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 77, 79, 0.15) !important;
  }

  @keyframes liked-bounce {
    0% {
      transform: scale(1);
    }
    20% {
      transform: scale(1.5) rotate(-8deg);
    }
    40% {
      transform: scale(0.8) rotate(8deg);
    }
    60% {
      transform: scale(1.2) rotate(-4deg);
    }
    80% {
      transform: scale(0.95) rotate(2deg);
    }
    100% {
      transform: scale(1);
    }
  }

  .message-content {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.75;
    margin-bottom: 1.8rem;
    letter-spacing: 0.1px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* 回复区域进一步优化 */
  .replies-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .replies-header {
    margin-bottom: 1.2rem;
  }

  .replies-count {
    color: rgba(255, 255, 255, 0.45);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }

  .reply-items {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 0.5rem;
  }

  .reply-item {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 1.4rem 1.6rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
  }

  .reply-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #1890ff, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .reply-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  }

  .reply-item:hover::before {
    opacity: 1;
  }

  .reply-user {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 0.6rem;
  }

  .reply-nickname {
    color: #fff;
    font-weight: 600;
    font-size: 1.05rem;
    letter-spacing: -0.2px;
  }

  .reply-time {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.3px;
  }

  .reply-content {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0.1px;
  }

  /* 展开/收起回复进一步优化 */
  .expand-replies,
  .collapse-replies {
    text-align: center;
    margin-top: 0;
    padding: 0.8rem 0;
  }

  .expand-replies :deep(.ant-btn-link),
  .collapse-replies :deep(.ant-btn-link) {
    color: #1890ff !important;
    font-size: 0.95rem;
    border-radius: 12px !important;
    background: rgba(24, 144, 255, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.7rem 1.2rem;
    border: 1px solid rgba(24, 144, 255, 0.25);
    font-weight: 600;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .expand-replies :deep(.ant-btn-link::before),
  .collapse-replies :deep(.ant-btn-link::before) {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s;
  }

  .expand-replies :deep(.ant-btn-link:hover::before),
  .collapse-replies :deep(.ant-btn-link:hover::before) {
    left: 100%;
  }

  .expand-replies :deep(.ant-btn-link:hover),
  .collapse-replies :deep(.ant-btn-link:hover) {
    color: #40a9ff !important;
    background: rgba(24, 144, 255, 0.15) !important;
    border-color: rgba(24, 144, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.25) !important;
  }

  .expanded-replies {
    animation: slideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* 回复表单进一步优化 */
  .reply-form {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    border-radius: 14px;
    padding: 1.5rem 1.8rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }

  .reply-form :deep(.ant-input) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .reply-form :deep(.ant-input:focus) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .reply-form :deep(.ant-input::placeholder) {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 400;
  }

  /* 富文本编辑器样式 */
  .reply-form :deep(.rich-textarea) {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    color: #fff !important;
    font-size: 1rem;
    box-shadow: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 1rem 1.2rem 2.5rem 1.2rem;
    font-weight: 500;
    resize: none !important;
    min-height: 120px;
    position: relative;
  }

  .reply-form :deep(.rich-textarea:focus) {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(24, 144, 255, 0.5) !important;
    box-shadow: 0 0 0 4px rgba(24, 144, 255, 0.12) !important;
    transform: translateY(-1px);
  }

  .reply-form :deep(.rich-textarea::placeholder) {
    color: rgba(255, 255, 255, 0.45) !important;
    font-weight: 400;
  }

  /* 隐藏所有textarea的拖拉图标 */
  .reply-form :deep(.ant-input)::-webkit-resizer,
  .reply-form :deep(.rich-textarea)::-webkit-resizer {
    display: none !important;
  }

  .reply-form :deep(.ant-input)::-moz-resizer,
  .reply-form :deep(.rich-textarea)::-moz-resizer {
    display: none !important;
  }

  /* 字符计数样式 */
  .reply-form :deep(.ant-input-data-count) {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.9rem;
    font-weight: 500;
    position: absolute !important;
    bottom: 0.8rem !important;
    right: 1rem !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 0.2rem 0.6rem !important;
    border-radius: 6px !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* 回复身份显示进一步优化 */
  .reply-form .reply-to {
    color: #1890ff;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    display: block;
    letter-spacing: 0.3px;
  }

  .reply-nickname.louzhu {
    color: #52c41a;
    font-weight: 700;
    margin-right: 0.3em;
    position: relative;
  }

  .reply-nickname.louzhu::after {
    content: ' (楼主)';
    color: #52c41a;
    font-size: 0.9em;
    font-weight: 500;
    margin-left: 3px;
    opacity: 0.8;
  }

  /* 回复表单按钮样式 */
  .reply-form :deep(.ant-btn) {
    height: auto !important;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .reply-form :deep(.ant-btn-primary) {
    background: linear-gradient(135deg, #1890ff 0%, #0050b3 100%) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3) !important;
  }

  .reply-form :deep(.ant-btn-primary:hover) {
    background: linear-gradient(135deg, #40a9ff 0%, #096dd9 100%) !important;
    box-shadow: 0 6px 16px rgba(24, 144, 255, 0.4) !important;
    transform: translateY(-1px);
  }

  .reply-form :deep(.ant-btn:not(.ant-btn-primary)) {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.8) !important;
  }

  .reply-form :deep(.ant-btn:not(.ant-btn-primary):hover) {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    transform: translateY(-1px);
  }

  /* 响应式设计进一步优化 */
  @media (max-width: 768px) {
    .message-item {
      padding: 2rem 2rem;
    }

    .message-items {
      gap: 2.5rem;
    }

    .reply-item {
      padding: 1.2rem 1.4rem;
    }

    .reply-items {
      gap: 1rem;
    }

    .expanded-replies {
      gap: 1rem;
    }

    .reply-user {
      gap: 0.7rem;
      margin-bottom: 0.5rem;
    }

    .reply-form {
      padding: 1.2rem 1.5rem;
    }

    .reply-form :deep(.ant-input) {
      width: 100% !important;
      margin-bottom: 1rem;
    }

    .reply-form :deep(.ant-form-item) {
      margin-bottom: 1rem;
    }
  }

  /* 头像内容居中进一步优化 */
  :deep(.ant-avatar) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700;
    font-size: 1.1em;
    letter-spacing: 0.5px;
    user-select: none;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
  }

  :deep(.ant-avatar:hover) {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  }

  @media (max-width: 768px) {
    :deep(.ant-avatar) {
      font-size: 1em;
    }
  }

  .custom-empty-dark {
    :deep(.ant-empty-description) {
      color: #bfc9d1 !important;
      font-size: 1.08rem;
      font-weight: 500;
      letter-spacing: 0.2px;
    }
    :deep(.ant-empty-image) {
      filter: brightness(0.7) grayscale(0.2);
      opacity: 0.85;
    }
  }
</style>
